
<template>
  <div id="js_echart" v-bind:style="chartsStyle">
  
  </div>
</template>

<script>
  const ecs = () => {
    return new Promise(function(resolve, reject) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "/res/js/plugin/echarts.simple.min.js";
      script.onerror = reject;
      document.head.appendChild(script);
      script.onload = script.onreadystatechange = function() {
        if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
          //code
          console.log("load echarts ok");
          resolve();
        }
        script.onload = script.onreadystatechange = null;
      }
    })
  }
  export default {
    data: function() {
      return {
        chartsStyle: {
          map: "",
          width: '100%',
          height: this.chartsHeight + 'px',
          geoc: ""
        }
      }
    },
    props: {
      // 地图在该视图上的高度
      callback: {
        type: Function,
        default: () => {}
      },
      chartsHeight: {
        type: Number,
        default: 400
      },
      option:{
        type:Object
      }
    },
    created: function() {
  
    },
    mounted: function() {
      this.$nextTick(function() {
        ecs().then(() => {
          this.init();
        }).catch(e => {
          console.log("echarts impl error")
        })
      });
    },
    methods: {
      init() {
        var _obj = document.getElementById('js_echart');
        _obj.id = 'js_echart_' + Math.floor(100 * Math.random());
        var myChart = echarts.init(_obj);
        var option = this.option ? this.option : {
          title: {
                text: 'ECharts 示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["A","B","C","D","E","F"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart.setOption(option);
        this.$emit("callback");
      }
    }
  }
</script>

<!--Add"scoped" attribute to limit CSS to this component only -->
<style scoped>
  
</style>